<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>基础-销毁地球</title>
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 24px;
            padding: 0 6px;
            line-height: 24px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }
        .defultbtn:hover {
            background-color: #b3daf8;
        }
    </style>
</head>
<body>
    <div style="padding:2px 5px; font-size:18px; font-family: 宋体;">
        <div class="defultbtn" onclick="create()">创建地球</div>
        <div class="defultbtn" onclick="destroy()">销毁地球</div>
    </div>

    <div id="earthContainer" style="width:100%; height: calc(100% - 30px); background: grey">
    </div>
    <script>
        var earth;
        create();

        function create() {
            XE.ready().then(() => {
                if (earth) {
                    return;
                }

                earth = new XE.Earth('earthContainer');

                earth.sceneTree.root = {
                    "children": [
                        {
                            "czmObject": {
                                "xbsjType": "Imagery",
                                "xbsjImageryProvider": {
                                    "createTileMapServiceImageryProvider": {
                                        url: XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                                        fileExtension: 'jpg',
                                    },
                                    "type": "createTileMapServiceImageryProvider"
                                },
                                "name": "默认离线影像",
                            }
                        },
                    ]
                };
            });

            // only for Debug
            window.earth = earth;
        }

        function destroy() {
            earth = earth && earth.destroy();
        }
    </script>
</body>
</html>